<template>
    <div>
        <div class="center">
            <div>{{$t('langs.Centers.title')}}<span>{{$t('langs.Centers.title1')}}</span></div>
            <div>
                <div class="center-left">
                    <ul>
                        <li v-for="(item,index) in tiltelist" :key="index" @click="centeritem(index,item.router,item.query)">
                            {{item.name}}
                            <span v-if="tilteindex==index"></span>
                        </li>
                    </ul>
                </div>
                <div class="center-right">
                    <slot></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tiltelist: [
                {
                    name: this.$t('langs.Centers.order.name'),
                    router: '/personalcenter',
                    query: 0
                },
                {
                    name:  this.$t('langs.Centers.integral.name'),
                    router: '/awardpointsystem',
                    query: 1
                },
                {
                    name: this.$t('langs.Centers.like.name'),
                    router: '/myfavorite',
                    query: 2
                },
                {
                    name: this.$t('langs.Centers.goods.name'),
                    router: '/returnsmanagement',
                    query: 3
                },
                {
                    name: this.$t('langs.Centers.coupon.name'),
                    router: '/mycoupon',
                    query: 4
                },
                {
                    name: this.$t('langs.Centers.personal.name'),
                    router: '',
                    query: 5
                },
                {
                    name: this.$t('langs.Centers.notes.name'),
                    router: '/browsingrecords',
                    query: 6
                },
                {
                    name:  this.$t('langs.Centers.address.name'),
                    router: '',
                    query: 7
                }

            ],
            tilteindex: 0,
        }
    },
    created() {
        this.tilteindex = this.$store.state.id
        this.tilteindex = localStorage.getItem('personalid')
    },
    methods: {
        centeritem(i,page,id) {
            this.tilteindex = i
            this.$router.push({
                path: page,
            })
            localStorage.setItem('personalid',id)
            this.$store.commit('personalid',id)
        }
    },
    
}
</script>

<style lang='scss'>
.center {
    padding-top: 215px;
    width: 1164px;
    padding-bottom: 182px;
    >div:nth-child(1) {
        font-size: 14px;
        >span {
            color: #666;
        }
    }
    >div:nth-child(2) {
        overflow: hidden;
        margin-top: 23px;
        .center-left {
            position: absolute;
            z-index: 2;
            background: #fff;
            >ul {
                border: 1px solid #EDEDED;
                width: 184px;
                >li {
                    font-size: 16px;
                    line-height: 40px;
                    padding-left: 26px;
                    position: relative;
                    cursor: pointer;
                    >span {
                        display: inline-block;
                        width: 2px;
                        height: 40px;
                        background: #000;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                }
            }
        }
        .center-right {
            float: left;
            margin-left: 211px;
        }
    }
}
</style>